<template>
    <Card>
        <el-descriptions
                class="margin-top"
                title="任务详情"
                :column="1"
                :size="size"
                :style="blockMargin"
                direction="vertical"
        >
            <template #extra>
                <template v-if="!isEditing">
                    <el-button  type="primary" @click="toggleEditing">编辑</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="toggleSave">保存</el-button>
                </template>
                <el-button
                        type="primary"
                        size="default"
                        @click="showDeleteConfirm()"
                >删除</el-button>
            </template>
            <el-descriptions-item label="任务名称">
                <template v-if="!isEditing">{{ task.taskName }}</template>
                <template v-else>
                    <el-input v-model="task.taskName" ></el-input>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="任务描述">
                <template v-if="!isEditing" type="textarea" >{{ task.taskDesc }}</template>
                <template v-else>
                    <el-input v-model="task.taskDesc"></el-input>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="关联组织">
                <template v-if="!isEditing">{{task.relatedOrg}}</template>
                <template v-else>
                    <el-select v-model="task.relatedOrg" placeholder="asset.belongOrgName">
                        <el-option v-for="org in Orgs" :key="org.id" :label="org.orgName" :value="org.id" />
                    </el-select>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="任务测试人员">
                <template v-if="!isEditing">{{ task.joinedTesters}}</template>
                <!--        <template v-else>-->
                <!--          <el-select v-model="task.joinedTesters">-->
                <!--            <el-option v-for="label in Labels" :key="label.labelName" :label="label.labelName" :value="label.labelName">-->
                <!--              <span style="float: left">{{ label.labelName }}</span>-->
                <!--              <span-->
                <!--                  style="float: right;"-->
                <!--                  class="delete-icon"-->
                <!--              ><el-icon style="right:0" @click="deleteLabel(label.id)"><Close /></el-icon></span-->
                <!--              >-->
                <!--            </el-option>-->
                <!--            <template #footer>-->
                <!--              <div style="margin-top: 8px;">-->
                <!--                <el-button v-if="!isAdding" text bg size="small" @click="onAddOption">-->
                <!--                  添加新的标签-->
                <!--                </el-button>-->
                <!--                <template v-else>-->
                <!--                  <el-input-->
                <!--                      v-model="NewLabel.labelName"-->
                <!--                      class="option-input"-->
                <!--                      placeholder="输入标签名"-->
                <!--                      size="default"-->
                <!--                      style="width: 180px"-->
                <!--                  />-->
                <!--                  <div>-->
                <!--                    <el-button type="primary" size="small" style="margin:10px 10px" @click="addLabel">确认</el-button>-->
                <!--                    <el-button type="primary" size="small" @click="onAddOption">取消</el-button>-->
                <!--                  </div>-->
                <!--                </template>-->
                <!--              </div>-->
                <!--            </template>-->
                <!--          </el-select>-->
                <!--        </template>-->
            </el-descriptions-item>
            <el-descriptions-item label="任务状态"  span="4"
            ><template v-if="!isEditing">{{ task.taskStatus}}</template>
                <template v-else>
                    <el-input v-model="task.taskStatus" autosize></el-input>
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">
                <template v-if="!isEditing">{{ task.startTime}}</template>
                <!--        <template v-else>-->
                <!--          <el-select v-model="task.startTime">-->
                <!--            <el-option v-for="category in Categorys" :key="category.categoryName" :label="category.categoryName" :value="category.categoryName">-->
                <!--              <span style="float: left">{{ category.categoryName }}</span>-->
                <!--              <span-->
                <!--                  style="float: right;"-->
                <!--                  class="delete-icon"-->
                <!--              ><el-icon style="right:0" @click="deleteCategory(category.id)"><Close /></el-icon></span-->
                <!--              >-->
                <!--            </el-option>-->
                <!--            <template #footer>-->
                <!--              <div style="margin-top: 8px;">-->
                <!--                <el-button v-if="!isAdding" text bg size="small" @click="onAddOption">-->
                <!--                  添加新的类别-->
                <!--                </el-button>-->
                <!--                <template v-else>-->
                <!--                  <el-input-->
                <!--                      v-model="NewCategory.categoryName"-->
                <!--                      class="option-input"-->
                <!--                      placeholder="输入标签名"-->
                <!--                      size="default"-->
                <!--                      style="width: 180px"-->
                <!--                  />-->
                <!--                  <div>-->
                <!--                    <el-button type="primary" size="small" style="margin:10px 10px" @click="addCategory">确认</el-button>-->
                <!--                    <el-button type="primary" size="small" @click="onAddOption">取消</el-button>-->
                <!--                  </div>-->
                <!--                </template>-->
                <!--              </div>-->
                <!--            </template>-->
                <!--          </el-select>-->
                <!--        </template>-->
            </el-descriptions-item>
          <el-descriptions-item label="结束时间">
            <template v-if="!isEditing">{{ task.endTime}}</template>
          </el-descriptions-item>
        </el-descriptions>
    </Card>
</template>
<style>
    .ivu-card-body {
        margin: 10px auto;
        width: 1024px;
    }
    .delete-icon:hover {
        color:#b4d7ff;
        cursor: pointer;
    }
    .el-icon{
        right: 0;
    }


</style>
<script>
    import {ElMessageBox} from "element-plus";
    import {Close, Delete} from "@element-plus/icons-vue";
    import {markRaw} from "vue";

    export default {
        name: 'Article',
        components: {
            Close

        },
        data() {
            return {
                task: [{
                    id : 0,
                    taskName: '',
                    taskDesc: '',
                    relatedOrg: '',
                    joinTesters:'',
                    taskStatus:'',
                    startTime:'',
                    endTime:'',
                }
                ],
                Orgs:[
                    {
                        'id':0,
                        'orgName':'',
                        'fatherOrg':''
                    }
                ],
                adminBtn:false,
                isEditing: false,
                isAdding: false,
            }
        },
        created: function () {
            this.adminBtn = sessionStorage.getItem('remake') === '资产管理员';
            this.adminBtn = sessionStorage.getItem('remake') === '平台管理员';
            if ('id' in this.$route.params) {
                let id = this.$route.params.id
                console.log(this.$route.params.id)
                //获取任务
                this.$api.get('attackTask/getTask/' + id).then((res) => {
                    if (res.code === 1) {
                        this.task = res.data
                        console.log(this.task)
                        this.$api.get('assetOrg/getByid/' + this.task.relatedOrg).then((res) => {
                            this.task.relatedOrg = res.data.orgName
                        })
                    }
                    else
                    {
                        this.info(res.msg)
                    }
                })
            }

        },
        methods: {
            info(text) {
                this.$Notice.info({
                    title: '提示',
                    desc: text
                });
            },
            showDeleteConfirm() {
                ElMessageBox.confirm('是否确认删除?', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确认',
                    type: 'warning',
                    icon: markRaw(Delete),
                }).then(() => {
                    // 用户点击了确认按钮，调用删除逻辑
                    this.deleteAsset();
                }).catch(() => {
                    // 用户点击了取消按钮，可以在这里处理取消的逻辑
                });
            },
            //删除任务
            deleteAsset() {
                this.$api.delete('attackTask/delete/' + this.task.id).then((res) => {
                    if (res.code === 1){
                        this.$Notice.info({
                            title: '提示',
                            desc: res.msg
                        });
                        this.$router.push({path: '/task'})
                    }
                    else{
                        this.$Notice.info({
                            title: '提示',
                            desc: res.msg
                        });
                    }

                })
            },
            toggleEditing() {
                this.$api.get('assetOrg/getAll').then((res) => {
                    console.log(res.data)
                    this.Orgs = res.data
                    console.log(this.Orgs)
                })
                this.isEditing = !this.isEditing;
            },
            toggleSave() {
                let data = {
                    id : this.task.id,
                    taskName: this.task.taskName,
                    taskDesc: this.task.taskDesc,
                    relatedOrg: this.task.relatedOrg,
                    startTime: this.task.startTime,
                    endTime: this.task.endTime,
                    joinTesters:this.task.joinTesters,
                    taskStatus:this.task.taskStatus,
                }
                console.log("----------------------------------------")
                console.log(data)
                this.$api.post('attackTask/update', data).then((res) => {
                    console.log(res.data)
                    this.$Notice.info({
                        title: '提示',
                        desc: res.msg
                    });
                })
                this.isEditing = !this.isEditing;
            },
        },
    }
</script>
